
<template>
  <div class="container">
    <div class="btnSearch">
      <el-form :inline="true" label-position="top" :model="formInline" class="demo-form-inline">
        <el-form-item label="请选择数据库">
            <el-select v-model="formInline.tableName" filterable placeholder="请选择数据库" @change="selectAllTable">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="请选择表">
            <el-select v-model="formInline.table_comment" filterable placeholder="请选择" @change="selectAllTableFiled">
              <el-option
                v-for="item in allTable"
                :key="item.TABLE_NAME"
                :label="item.TABLE_NAME"
                :value="item.TABLE_NAME"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="年份" v-if="showYearSelect">
            <el-select v-model="formInline.year" clearable placeholder="请选择">
              <el-option
                v-for="item in yearData"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="selectData" class="optionBtns">搜索</el-button>
            <!-- <el-button type="warning" size="small" icon="el-icon-search" @click="synchronization" class="optionBtns">同步</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContent">
      <div class="tableList">
        <el-table
          :data="this.tableFiledName"
          size="small"
          row-class-name="row"
          cell-class-name="column"
          :highlight-current-row="true"
          fit
        >
          <el-table-column
            v-for="(item, index) in this.tableLabel"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          />
        </el-table>
      </div>
      <div class="tablePage">
        <pagination :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="selectData" />
      </div>
    </div>
    <div class="tableContent2" v-if="different">
      <h3>差异数据</h3>
      <div class="tableList">
        <el-table
          :data="tableData2"
          style="width: 100%"
          >
          <el-table-column
            v-for="(item, index) in this.tableLabel2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          />
          <el-table-column
            prop="differentType"
            label="类型">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
    name:'LibQueryData',
  data() {
    return {
      different:false,
      differentStatus:false,
      pagination: {
        size: 15,
        num: 1
      },
      formInline:{
        tableName:'',
        table_comment: '',
        value1:'',
        year:'',
      },
      total: 0,
      queryParams: {},
      options: [],
      allTable: [],
      tableFiled: [],
      tableName: '',
      tableLabel: [],
      tableLabel2: [],
      tableData: [],
      tableData2: [],
      tableFiledName: [],
      yearData:[],
      showYearSelect:false,
    }
  },
  mounted() {
    this.selectAllDataBase()
    this.fetch();
    var year = new Date().getFullYear();
    for (var i = 0; i < 4; i++) {
      this.yearData.push(year - i)
    }
  },
  methods: {
    reset() {
      this.queryParams = {}
      this.sort = {}
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
      this.selectData()
    },
    synchronization() {
      if (!this.formInline.table_comment) {
        this.$message.error('请选择表进行同步')
        return
      }
      if (this.tableName == 'bjdmb') {
        this.$get('copyData/updateBJDMB', {}).then((res) => {})
      } 
      else if (this.tableName == 'student_status_educational') {
        this.$get('copyData/updateXSJBXXB', {
          year: this.formInline.year
        }).then((res) => {})
      } 
      else if (this.tableName == 'zydmb') {
        this.$get('copyData/updateZYDMB', {}).then((res) => {})
      } 
      else if (this.tableName == 'xydmb') {
        this.$get('copyData/updateXYDMB', {}).then((res) => {})
      }
      else if (this.tableName == 'CJB') {
        this.$get('copyTYXYData/updateDifferentCJB', {
          year: this.formInline.year
        }).then((res) => {})
      } 
    },

    selectData() {
      this.fetch({
        ...this.queryParams,
        ...this.sort
      }) 
    },
    getDiffData() {
      if (this.tableName == 'bjdmb') {
        this.getOtherList('copyData/selectBJDMB')
      }else if (this.tableName == 'student_status_educational') {
        this.getOtherList('copyData/selectXSJBXXB')
      }else if (this.tableName == 'zydmb') {
        this.getOtherList('copyData/selectZYDMB')
      }else if (this.tableName == 'xydmb') {
        this.getOtherList('copyData/selectXYDMB')
      }else if (this.tableName == 'CJB') {
        this.getOtherList('copyTYXYData/SelectDifferentCJB')
      }
    },
    getOtherList(url) {
       this.$get(url, {
         year: this.formInline.year
       }).then((res) => {
         const data = res.data;
         this.tableData2 = data;
         this.different = true
       })
    },
    fetch(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.baseName = this.baseName
      params.tableName = this.tableName
      params.tableFiled = this.tableFiled
      params.year = this.formInline.year
      this.$get('dataCenter/selectData', {
        ...params
      }).then((r) => {
        this.getDiffData();
        if(r.data){
        const data = r.data.data
        this.total = r.data.count
        this.tableFiledName = data
        this.loading = false
        }
        
      })
    },
    selectAllDataBase() {
      this.$get('dataCenter/selectAllDataBase', {
      }).then((r) => {
        const data = r.data.data
        for (var i = 0; i < data.length; i++) {
          this.options.push({ value: data[i].TABLE_SCHEMA, label: data[i].TABLE_SCHEMA })
        }
        this.loading = false
      })
    },
    selectAllTable(baseName) {
      this.$get('dataCenter/selectAllTable', {
        baseName
      }).then((r) => {
        this.baseName = baseName
        const data = r.data.data
        this.allTable = []
        for (var i = 0; i < data.length; i++) {
          this.allTable.push(data[i])
        }
        this.loading = false
      })
    },
    selectAllTableFiled(tableName) {
      this.tableFiledName = [];
      if (tableName == 'student_status_educational' || tableName == 'CJB' || tableName == 'BKMDB') {
        this.showYearSelect = true;
        this.formInline.year = ''
      } else {
        this.showYearSelect = false;
        this.formInline.year = ''
      }
      this.tableLabel = [];
      this.tableLabel2 = [];
      this.tableData = [];
      var baseName = this.baseName
      this.tableName = tableName
      this.$get('dataCenter/selectAllTableField', {
        baseName, tableName
      }).then((r) => {
        const data = r.data.data
        this.tableData = []
        var arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push(data[i].COLUMN_NAME)
          this.tableData.push({ value: data[i].COLUMN_NAME, label: data[i].column_comment })
          this.tableLabel.push({ label: data[i].column_comment, prop: data[i].COLUMN_NAME.split('.')[1] })
          this.tableLabel2.push({ label: data[i].column_comment, prop: data[i].COLUMN_NAME.split('.')[1].toLowerCase() })
        }
        this.tableFiled = arr.join(',')
        this.loading = false
      })
    },
    changeTableFiled(event) {
      this.tableLabel = []
      this.tableFiled = []
      for (var i = 0; i < event.length; i++) {
        this.tableLabel.push({ label: event[i].label, prop: event[i].value })
        this.tableFiled.push(event[i].value)
      }
    }
  }
}
</script>
<style scoped>
.container {
  padding: 10px;
  padding-bottom: 50px;
}
.el-form-item {
  margin-bottom: 5px;
  margin-right: 20px;
}
.btnSearch {
  height: 100px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
}
.btnSearch /deep/ .el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 180px;
}
.el-button {
  padding: 7px 10px;
}
.optionBtns {
  margin-top: 30px;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-form-item__label {
  line-height: 24px;
  padding: 0;
}
</style>